<template>
  <div id="selectGiftCardDialog">
    <el-dialog
      title="请您选择礼品卡"
      :visible.sync="dialogData.isShow"
      width="50%"
    >
      <!-- 搜索 -->
      <el-form :inline="true" :model="searchInfo" ref="ruleForm">
        <el-form-item label="礼品卡名称" prop="cardName">
          <el-input
            size="small"
            v-model="searchInfo.cardName"
            placeholder="请您输入名称查询"
            maxlength="100"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch">
            查询
          </el-button>
          <el-button type="success" plain @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 -->
      <el-table :data="tableData" @row-click="getCurrentRow">
        <el-table-column width="30" align="center">
          <template slot-scope="{ row }">
            <el-radio
              :label="row.templateNo"
              v-model="radio"
              @change.native="getCurrentRow(row)"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="礼品卡名称"
          prop="cardName"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column label="卡面额" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.price / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期" min-width="95" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.termType ? `截止至${row.termEndAt}` : '永久有效'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="适用商品"
          prop="applicableCommodities"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="库存"
          prop="inventory"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          label="商品链接"
          prop="goodsShareUrl"
          min-width="120"
          align="center"
        ></el-table-column>
      </el-table>
      <!-- 分页器 -->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="dialogData.isShow = false">
          取 消
        </el-button>
        <el-button type="success" @click="confirm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getGiftCard,
  giftCardExist
} from '@/api/integralExchange/commodityConfig'
export default {
  props: ['dialogData'],
  data() {
    return {
      searchInfo: { cardName: '' },
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      radio: '',
      giftCardInfo: null
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 列表 */
    searchList() {
      const obj = Object.assign(this.searchInfo, this.searchParams)
      getGiftCard(obj, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 查询 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 选择礼品卡 */
    getCurrentRow(row) {
      this.radio = row.templateNo
      this.giftCardInfo = row
    },
    /* 确认提交 */
    confirm() {
      if (!this.giftCardInfo) {
        this.$message.warning('请选择礼品卡')
        return
      }
      const { templateNo } = this.giftCardInfo
      giftCardExist(templateNo, {}, (res) => {
        if (res) {
          this.$message.warning('当前商品已被创建不能再次选择并创建')
          return
        }
        this.$emit('changeGiftCard', this.giftCardInfo)
        this.dialogData.isShow = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.el-dialog) {
  margin: 5vh auto 0 !important;
}
:deep(.el-radio) {
  margin-left: 6px;
}
:deep(.el-radio .el-radio__label) {
  display: none;
}
</style>
